<template>
  <div id="idea">
    <div class="header">
      <span class="_txt">创业</span>
      <span class="_icon" @click="goTo('/setting')">
        <i class="el-icon-more-outline"></i>
      </span>
    </div>
    <div class="graph_huge">
      <GrapHuge></GrapHuge>
    </div>
    <div class="graph_thiny_1 graph">
      <div class="_box">
        <div class="_txt"><span>项目状态</span></div>
        <div class="_sept">
          <el-steps :active="1" finish-status="success" align-center	>
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
            <el-step title="步骤 4"></el-step>
            <el-step title="步骤 5"></el-step>
          </el-steps>
        </div>
      </div>
    </div>
    <div class="graph_thiny_2 graph">
      <div class="_box">
        <div class="_chart _c2" id="chart_2"></div>
        <div class="_chart _c3" id="chart_3"></div>
      </div>
    </div>
    <div class="socket">
      <div class="_box">
        <div class="_create _button" @click="goTo('/other/guide')">
          <span class="_txt">发起融资项目</span>
          <span class="_b1">
            <i class="el-icon-arrow-right"></i>
          </span>
          <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4182270995,656507032&fm=15&gp=0.jpg" alt="">
        </div>
        <div class="_state _button">
          <span class="_txt">资金合约状态</span>
          <span class="_b1">
            <i class="el-icon-arrow-right"></i>
          </span>
          <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=565365580,782567906&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="_service _button" @click="goTo('/other/service')">
          <span class="_txt">联系服务通道</span>
          <span class="_b1">
            <i class="el-icon-arrow-right"></i>
          </span>
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570969647942&di=cdb365333e658bfa6ae67a381fe1a7b2&imgtype=0&src=http%3A%2F%2Fimage1.hhczy.com%2Fweb%2F2017%2F9%2F22%2F323939220511004.700x700.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GrapHuge from '../../components/showData.vue'
export default {
  data () {
    return {
      chardata_1:{
          
        },
      chardata_2:{
          
        },
      chardata_3:{
          
        },
      active:0,
    }
  }, 
  components:{GrapHuge},
  mounted(){
    this.allotData();
    this.SetEchart();
  },
  
  computed: {
    getGrapData(){
      return this.$store.getters.getGrapData
    }
  }, 
  methods:{
    goTo:function(Path){
      this.$router.push({
          path:Path,
          query:{
              history: this.$route.path,
          }
      });
    },
    SetEchart(){
        // 基于准备好的dom，初始化echarts实例
      let myChart_2 = this.$echarts.init(document.getElementById('chart_2'));
      let myChart_3 = this.$echarts.init(document.getElementById('chart_3'));
      // 绘制图表
      
      var  option_2 = {
        title:{
          text:'月收支状态',
          textStyle:{
            fontSize:16,

          },
        },
        grid:{
          bottom:'5%',
          top:'30%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data:['收入','支出','差额'],
            itemWidth:10,
            itemHeight:3,
            top:20,
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel:{
                  fontSize:10,
                },
                splitLine:{
                  show:false,
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value}',
                    fontSize:7,
                },
                splitLine:{
                  show:false,
                }
            },
            {
                type: 'value',
            
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value}%',
                    fontSize:7,
                },
                splitLine:{
                  show:false,
                }
            }
        ],
        series: [
        {
            name:'收入',
            type:'bar',
            data:this.chardata_2.ch1
        },
        {
            name:'支出',
            type:'bar',
            data:this.chardata_2.ch2
        },
        {
            name:'差额',
            type:'line',
            yAxisIndex: 1,
            data:this.chardata_2.ch3
        }
        ],
        top:30,
      };
      let option_3 = {
        title : {
            text: '资金使用方向',
            x:'center',
            textStyle:{
              fontSize:14,
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            position: [10, 10],
            textStyle:{
              fontSize:8,
            }
        },
        legend:{
          type:'scroll',
          data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8',],
          itemWidth:5,
          itemHeight:5,
          bottom:2,
          borderRadius: 5, 
          selectedMode:false,
        },
        calculable : true,
        series : [
            {
                name:'资金使用方向',
                type:'pie',
                radius : ['30%','60%'],
                center : ['50%', '50%'],
                
                label:{
                  show:false,
                },
                data:this.chardata_3.ch1,
            }
        ]
      };
      myChart_2.setOption(option_2);
      myChart_3.setOption(option_3);
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    allotData(){
      var temp = this.getGrapData;
      //console.log(temp);
      this.chardata_1 = temp[0];
      this.chardata_2 = temp[1];
      this.chardata_3 = temp[2];
    },
  }
}
</script>

<style scoped>
/*全局 */
  div,span{
    display: block;
  }
  span{
    text-align: center;
    display: block;
  }
  #idea{
    width: 100%;
    height: 800px;

  }
  .header{
    width: 100%;
    height: 50px;
    background: linear-gradient(to right,#ff6600    ,#ff3300);
  }
  .graph{
    width: 100%;
    height: 15%;
    background: #f5f5f5;
    border-top:solid 1px #999;
  }
  .graph_huge{
    width: 100%;
    height: 25%;

  }
  .socket{
    width:100%;
    height: 240px;
    border-top:solid 1px #999;
    position: relative;
  }
/*header */
  .header ._txt{
    color: #f5f5f5;
    height:50px;
    text-align:left;
    font-weight: 600;
    font-size: 20px;
    width: 90%;
    margin: 0 auto auto 15px;
    position: absolute;
    line-height: 50px;
  }
  .header ._icon{
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    font-size:40px; 
    color:#666;
  }
/*graph_huge部分组件 */


/*graph 部分组件*/
  .graph ._box{
    width: 100%;
    height: 100%;
  }
  .graph_thiny_2 ._box ._chart{
    position: relative;
    float: left;
  }
  .graph_thiny_2 ._c2{
    width: 60%;
    height: 100%; 
  }
  .graph_thiny_2 ._c3{
    width: 40%;
    height: 100%;
  }
  /*graph_1 */

  .graph_thiny_1 ._txt{
    width:100%;
    height: 30%;
    position: relative;
    font-size: 20px;
    font-weight: 600;
    
  }
  .graph_thiny_1 ._txt span{
    position:absolute;
    left:5%;
    line-height: 200%;
  }
  .graph_thiny_1 ._box{
    position: relative;
  }
  .graph_thiny_1 ._sept{
    width: 67%;
    top:15%;
    position:relative;
    margin: 0 auto;
  }
/*socket 部分组件 */
  .socket ._box{
    width:95%;
    margin: 0 auto;
  }
  .socket ._button{
    width:100%;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    height: 70px;
    margin:10px 0px;
    position: relative;
    overflow: hidden;
  }
  .socket ._txt{
    height: 100%;
    width: 70%;
    position: absolute;
    float: left;
    margin: 0 auto auto 20px;
    font-size:25px;
    font-weight: 400;
    vertical-align:middle;
    line-height: 70px;
    color: rgba(102, 102, 102, 1);
  }
  .socket ._b1{
    height: 30px;
    width: 30px;

    position: absolute;
    top:20px;
    right:20px;
    font-size: 30px;
  }
  .socket img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
    opacity: 0.5;
  }
</style>
